<template>
  <div class="recomcourseitme">
    <div v-for="(v,i) in data" :key="i" @click="fun()">
      <div>
      <img :src=v.imgurl alt="">
    </div>
    <div>
      <p>{{v.title}}</p>
      <p> <span>{{v.teachername}}</span><span>{{v.Easy}}</span></p>
      <p><span>{{v.money}}币</span> <span>{{v.number}}人学习</span></p>
    </div>
    </div>
    
  </div>
</template>

<script>

export default {
props:["data"],
methods:{
  fun(){
    this.$router.push("/details");  
    }
}
}
</script>
<style scoped>
.recomcourseitme>div{
  width: 3.43rem;
  display: flex;
  justify-content: space-between;
  margin: 0.1rem auto;
  background-color: #ffffff;
  border-radius: 0.05rem;
  
  
}
.recomcourseitme>div>div:nth-child(1)>img{
  width: .73rem;
  height: 1rem;
  display: block;
}
.recomcourseitme>div>div:nth-child(2){
  flex: 1;
   padding: 0 .1rem 0 .1rem;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(1){
  font-size: .13rem;
  font-weight: bold;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(2){
  font-size: .1rem;
  color: #aaaaaa;
  margin-top: 0.03rem;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(2)>span{
  font-size: .1rem;
  color: #aaaaaa;
  margin: 0 0.05rem;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(3){
  font-size: .12rem;
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(3)>span:nth-child(1){
  color: #c1212b;
  font-weight: bold;
}
.recomcourseitme>div>div:nth-child(2)>p:nth-child(3)>span:nth-child(2){
  color: #aaaaaa;
}

</style>